import { ButtonHTMLAttributes } from 'react';

import { ReactComponent as ChevronIcon } from '@/assets/images/buy/BackCheck.svg';
import { Button, ButtonVariants } from '@/shared/ui';
import cn from 'classnames';
import { useRouter } from 'next/router';

import cs from './BackButton.module.scss';

export const BackButton = ({
  className,
  defaultBackLink,
  onClick,
  text,
  ...props
}: { defaultBackLink?: string; text?: string } & ButtonHTMLAttributes<HTMLButtonElement>) => {
  const router = useRouter();
  const defaultOnClick = async () => {
    if (defaultBackLink) {
      await router.push(defaultBackLink);
      return;
    }
    router.back();
  };
  return (
    <Button
      className={cn(cs.back_button, className)}
      data-testid="button-back"
      onClick={onClick || (() => defaultOnClick())}
      variant={ButtonVariants.LinkGray}
      {...props}
    >
      <ChevronIcon /> <span>{text || 'Назад'}</span>
    </Button>
  );
};
